<div class='panel panel-default'>
    <div class='panel-heading'>
        {{pageTitle}}
    </div>
    <div class='panel-body'>
        <div class='row'>
            <div class='col-md-2'>Filter by:</div>
            <div class='col-md-4'>
                <input type='text'
                       [(ngModel)]='listFilter' />
            </div>
        </div>
        <div class='row'>
            <div class='col-md-6'>
                <h3>Filtered by: {{listFilter}}</h3>
            </div>
        </div>
        <div class='table-responsive'>
            <table class='table' *ngIf='products && products.length'>
                <thead>
                    <tr>
                        <th>
                            <button class='btn btn-primary'
                                    (click)='toggleImage()'>
                                {{showImage ? 'Hide' : 'Show'}} Image
                            </button>
                        </th>
                        <th>Product</th>
                        <th>Code</th>
                        <th>Available</th>
                        <th>Price</th>
                        <th>5 Star Rating</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor='let product of products | productFilter:listFilter'>
                        <td>
                            <img *ngIf='showImage'
                                  [src]='product.imageUrl'
                                  [title]='product.productName'
                                  [style.width.px]='imageWidth'
                                  [style.margin.px]='imageMargin'>
                        </td>
                        <td>
                            <a [routerLink]="['/product', product.productId]">
                                {{product.productName}}
                            </a>
                        </td>
                        <td>{{ product.productCode | lowercase }}</td>
                        <td>{{ product.releaseDate }}</td>
                        <td>{{ product.price | currency:'USD':true:'1.2-2'}}</td>
                        <td>
                            <ai-star [rating]='product.starRating'
                                     (ratingClicked)='onRatingClicked($event)'>
                            </ai-star>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>